<template>
	<div class="hm-news-card">
		<div class="container">
			<div class="box" @click="onClick">
				<img class="img" :src="goodsItemInfo.img" :alt="goodsItemInfo.title" :title="options.name" />
				<span class="title">{{ goodsItemInfo.title }}</span>
				<div class="submain">
					<span class="author">{{ goodsItemInfo.author }}</span>
					<span class="date">{{ goodsItemInfo.date }}</span>
				</div>
				<span class="summary">{{ goodsItemInfo.summary }}</span>
				<div class="row_2" />
				<div class="ft">
					<span class="comments" v-show="goodsItemInfo['showComments']">{{ goodsItemInfo.comments }}
						<view class="iconfont icon-icon-test"></view>
					</span>
					<span class="likes" v-show="goodsItemInfo['showLikes']">{{ goodsItemInfo.likes }}
						<view class="iconfont icon-icon-test18"></view>
					</span>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
	export default {
		name: 'HmNewsCard',
		props: {
			dataId: {
				type: String,
				default: 'hm-news-card'
			},
			options: {
				type: Object,
				default: function() {
					return {
						img: '/static/hm-news-card/images/img_22726_0_0.png',
						title: '新闻标题',
						author: '作者',
						date: '16 MAY 2016',
						summary: '新闻概要。新闻概要长度最好控制在50字符以内',
						comments: "14 评论",
						likes: "254 喜欢",
						url: '',
						showComments: true,
						showLikes: true
					};
				}
			}
		},
		data() {
			return {
				goodsItemInfo: {
					img: '',
					title: '出了一点小问题',
					author: 'lily',
					date: '16 MAY 2016',
					summary: '长度最好控制在50字符以内',
					comments: "14 评论",
					likes: "254 喜欢",
					showComments: true,
					showLikes: true
				}
			};
		},
		watch: {
			options(n) {
				this.buildGoodsItemInfo()
			}
		},
		computed: {
			random() {
				//返回一个1 -9 的数字
				return Math.ceil(Math.random() * 10)
			},
			comments() {
				//虚拟阅读量
				let len = this.options.goods_price.length;
				let num = len > 3 ? this.options.goods_price.slice(0, 3) : this.options.goods_price
				return Math.ceil(num)
			},

		},
		created() {
			//这个时候修改数据对象是最合适的 可以拿到options
			this.buildGoodsItemInfo()
		},
		mounted() {},
		methods: {
			onClick() {
				this.$emit('goodsItemClick', this.options.goods_id)
			},
			buildGoodsItemInfo() {
				// 开始构造goodsItemInfo 外边传入的东西更新了 你这里构造的却没更新 抽离出一个方法 在watch中调用这个方法
				this.goodsItemInfo = {
					img: this.options.goods_img,
					title: this.options.goods_title,
					author: this.options.user_name,
					date: this.options.create_time,
					summary: this.options.goods_name + this.options.goods_description,
					comments: this.comments * this.random * this.random,
					likes: Math.ceil(this.comments * this.random *
						0.618), // 这里收藏量按照 comments为基准 除以 0.618 黄金分割 一定要注意乘法中不能出现零 不然就全等于零了...
					showComments: true,
					showLikes: true
				}
			}
		}
	};
</script>
<style>
	@import './index.response.css';

	.iconfont {
		display: inline;
		color: #f40;
	}
</style>
